<template>
  <view class="query-panel">
    <view class="input-area">
      <input 
        type="text"
        v-model="localCode"
        placeholder="请输入卦事名称"
      />
	  <!-- maxlength="6"-->
      <button 
        class="search-btn"
        @click="onSearch"
      >查询</button>
    </view>
	
	<view class="options">
	      <checkbox-group @change="onOptionChange">
	        <label v-for="item in optionItems" :key="item.value">
	          <checkbox 
	            :value="item.value"
	            :checked="item.checked"
	          />
	          {{item.name}}
	        </label>
	      </checkbox-group>
	    </view>
	
  </view>
</template>

<script>
import { ref, watch } from 'vue'

export default {
  props: {
    modelValue: {
      type: String,
      default: ''
    }
  },
  
  emits: ['update:modelValue', 'search', 'option-change'],
    
setup(props, { emit }) {
    const localCode = ref(props.modelValue)
      
    const optionItems = ref([
        { value: 'showFuYao', name: '全伏爻', checked: false,show:true},
        { value: 'showNaYin', name: '纳音', checked: false,show:true},
        { value: 'showXinXiu', name: '星宿', checked: false,show:true},
        { value: 'showJinFang', name: '京房伏爻', checked: false,show:true}
    ])
  
 //    let platform = uni.getSystemInfoSync().platform
 //    console.log("onLoad  ===platform:"+platform)
 //    switch (platform) {
	// 	  case 'devtools':
	// 		optionItems.value[0].checked = false // 全伏爻默认选中
	// 		optionItems.value[0].show = false // 全伏爻默认选中
	// 		    console.log("onLoad  devtools:")
	// 		break
 //          case 'android':
 //            optionItems.value[0].checked = false // 全伏爻默认选中
	// 		optionItems.value[0].show = false // 全伏爻默认选中
 //            break
 //          case 'harmonyos':
 //            optionItems.value[0].checked = false // 全伏爻默认选中
 //            optionItems.value[0].show = false // 全伏爻默认选中
 //            break
 //          case 'ios':
 //            optionItems.value[0].checked = false // 全伏爻默认选中
 //            optionItems.value[0].show = false // 全伏爻默认选中
 //            break
 //          default:
 //            optionItems.value.forEach(item => (item.checked = true)) // 全部选中
 //            break
 //    }
	// console.log("optionItems:"+optionItems)
    watch(() => props.modelValue, (newVal) => {
      localCode.value = newVal
    })
    
    const onSearch = () => {
      emit('search', localCode.value)
    }
	const onOptionChange = (e) => {
	  const values = e.detail.value
	  const options = {
	    showFuYao: values.includes('showFuYao'),
	    showNaYin: values.includes('showNaYin'),
	    showXinXiu: values.includes('showXinXiu'),
	    showJinFang: values.includes('showJinFang')
	  }
	  emit('option-change', options)
	}
    
    return {
      localCode,
      optionItems,
      onSearch,
      onOptionChange
    }
  }
}
</script>

<style lang="scss" scoped>
.query-panel {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  margin-top: 80rpx;
  
  .input-area {
    display: flex;
    align-items: center;
    
    input {
      flex: 1;
      height: 80rpx;
      background-color: #f5f5f5;
      border-radius: 8rpx;
      padding: 0 20rpx;
      margin-right: 20rpx;
    }
    
    .search-btn {
      width: 160rpx;
      height: 80rpx;
      line-height: 80rpx;
      background-color: #3872FE;
      color: #fff;
      border-radius: 8rpx;
      font-size: 28rpx;
    }
  }
  .options {
    checkbox-group {
      display: flex;
      flex-wrap: wrap;
	  margin-top: 20rpx;
      
      label {
        margin-right: 20rpx;
        margin-bottom: 10rpx;
        font-size: 28rpx;
      }
    }
  }
}

</style> 